<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="robots" content="noindex, nofollow" />
    <script type="text/javascript" src="../internal.js"></script>
    <link rel="stylesheet" type="text/css" href="scrawl.css" />
  </head>
  <body>
    <div class="main" id="J_wrap">
      <div class="hot">
        <div class="drawBoard border_style1">
          <canvas
            id="J_brushBoard"
            class="brushBorad"
            width="360"
            height="300"
          ></canvas>
          <div
            id="J_picBoard"
            class="picBoard"
            style="width: 360px; height: 300px"
          ></div>
        </div>
        <div id="J_operateBar" class="operateBar">
          <span id="J_previousStep" class="previousStep">
            <em class="icon"></em>
            <em class="text"><var id="lang_input_previousStep"></var></em>
          </span>
          <span id="J_nextStep" class="nextStep">
            <em class="icon"></em>
            <em class="text"><var id="lang_input_nextsStep"></var></em>
          </span>
          <span id="J_clearBoard" class="clearBoard">
            <em class="icon"></em>
            <em class="text"><var id="lang_input_clear"></var></em>
          </span>
          <span id="J_sacleBoard" class="scaleBoard">
            <em class="icon"></em>
            <em class="text"><var id="lang_input_ScalePic"></var></em>
          </span>
        </div>
      </div>
      <div class="drawToolbar border_style1">
        <div id="J_colorBar" class="colorBar"></div>
        <div id="J_brushBar" class="sectionBar">
          <em class="brushIcon"></em>
          <a href="javascript:void(0)" class="size1">1</a>
          <a href="javascript:void(0)" class="size2">3</a>
          <a href="javascript:void(0)" class="size3">5</a>
          <a href="javascript:void(0)" class="size4">7</a>
        </div>
        <div id="J_eraserBar" class="sectionBar">
          <em class="eraserIcon"></em>
          <a href="javascript:void(0)" class="size1">1</a>
          <a href="javascript:void(0)" class="size2">3</a>
          <a href="javascript:void(0)" class="size3">5</a>
          <a href="javascript:void(0)" class="size4">7</a>
        </div>
        <div class="sectionBar">
          <div id="J_addImg" class="addImgH">
            <em class="icon"></em>
            <em class="text"><var id="lang_input_addPic"></var></em>
            <form
              method="post"
              id="fileForm"
              enctype="multipart/form-data"
              class="addImgH_form"
              target="up"
            >
              <input
                type="file"
                name="upfile"
                id="J_imgTxt"
                accept="image/gif,image/jpeg,image/png,image/jpg,image/bmp"
              />
            </form>
            <iframe name="up" style="display: none"></iframe>
          </div>
        </div>
        <div class="sectionBar">
          <span id="J_removeImg" class="removeImg">
            <em class="icon"></em>
            <em class="text"><var id="lang_input_removePic"></var></em>
          </span>
        </div>
      </div>
    </div>
    <div id="J_maskLayer" class="maskLayerNull"></div>

    <script type="text/javascript" src="scrawl.js"></script>
    <script type="text/javascript">
      var settings = {
        drawBrushSize: 3, //画笔初始大小
        drawBrushColor: "#4bacc6", //画笔初始颜色
        colorList: [
          "c00000",
          "ff0000",
          "ffc000",
          "ffff00",
          "92d050",
          "00b050",
          "00b0f0",
          "0070c0",
          "002060",
          "7030a0",
          "ffffff",
          "000000",
          "eeece1",
          "1f497d",
          "4f81bd",
          "c0504d",
          "9bbb59",
          "8064a2",
          "4bacc6",
          "f79646",
        ], //画笔选择颜色
        saveNum: 10, //撤销次数
      };

      var scrawlObj = new scrawl(settings);
      scrawlObj.isCancelScrawl = false;

      dialog.onok = function () {
        exec(scrawlObj);
        return false;
      };
      dialog.oncancel = function () {
        scrawlObj.isCancelScrawl = true;
      };
    </script>
  </body>
</html>
